<template>
  <div class="PersonalCenter">
    <div class="PersonalCenter_content" v-if="isViewShow">
      <div class="PersonalCenter_tit">
        <router-link to="/home">首页</router-link> > <router-link to="/personal/PersonalInformation">个人中心</router-link> > <a href="javascript:void(0)">{{titTex}}</a>
      </div>
      <div class="PersonalCenter_bod">
        <ul class="PersonalCenter_nav">
          <router-link active-class="active" class="PersonalInformation" :to="{path:'/personal/PersonalInformation'}" tag="li">
            <!-- <div @click="chengRouter($event, '个人信息')"></div> -->
            <i class="is"></i>
            <span>个人信息</span>
          </router-link>
          <router-link active-class="active" class="deposit" :to="{path:'/personal/deposit'}" tag="li">
            <!-- <div @click="chengRouter($event, '我的保证金')"></div> -->
            <i class="is"></i>
            <span>我的保证金</span>
          </router-link>
          <router-link active-class="active" class="MyCar" :to="{path:'/personal/MyCar'}" tag="li">
            <!-- <div @click="chengRouter($event, '我的车辆')"></div> -->
            <i class="is"></i>
            <span>我的车辆</span>
          </router-link>
          <router-link active-class="active" class="MyAttention" :to="{path:'/personal/MyAttention'}" tag="li">
            <!-- <div @click="chengRouter($event, '我的关注')"></div> -->
            <i class="is"></i>
            <span>我的关注</span>
          </router-link>
          <router-link active-class="active" class="MyBid" :to="{path:'/personal/MyBid'}" tag="li">
            <!-- <div @click="chengRouter($event, '参与的投标')"></div> -->
            <i class="is"></i>
            <span>参与的投标</span>
          </router-link>
          <router-link active-class="active" class="MyAuction" :to="{path:'/personal/MyAuction'}" tag="li">
            <!-- <div @click="chengRouter($event, '参与的竞拍')"></div> -->
            <i class="is"></i>
            <span>参与的竞拍</span>
          </router-link>
        </ul>
        <router-view class="routerView" />
      </div>
    </div>
    <router-view class="routerView" v-else />
  </div>
</template>
<script>
export default {
  data () {
    return {
      bgUrl: '',
      titTex: '个人信息',
      isViewShow: true
    }
  },
  mounted () {
    this.iStyleCheng()
  },
  watch: {
    '$route' (val, oldVal) {
      this.iStyleCheng()
    }
  },
  methods: {
    iStyleCheng () {
      this.isViewShow = true
      let _this = this
      setTimeout(function () {
        let oIs = $('.is')
        for (let x = 0; x < oIs.length; x++) {
          oIs[x].style.background = ''
        }
        switch (location.hash) {
          case '#/personal/PersonalInformation':
            oIs[0].style.background = "url('../../../static/img/PersonalCenter/img_xinxi_sel.png') no-repeat center center"
            _this.titTex = '个人信息'
            break
          case '#/personal/deposit':
            oIs[1].style.background = "url('../../../static/img/PersonalCenter/img_baozhengjin_sel.png') no-repeat center center"
            _this.titTex = '我的保证金'
            break
          case '#/personal/MyCar/aSoldCar':
            oIs[2].style.background = "url('../../../static/img/PersonalCenter/img_car_sel.png') no-repeat center center"
            _this.titTex = '我的车辆'
            break
          case '#/personal/MyCar/aBuyCar':
            oIs[2].style.background = "url('../../../static/img/PersonalCenter/img_car_sel.png') no-repeat center center"
            _this.titTex = '我的车辆'
            break
          case '#/personal/MyAttention':
            oIs[3].style.background = "url('../../../static/img/PersonalCenter/img_guanzhu_sel.png') no-repeat center center"
            _this.titTex = '我的关注'
            break
          case '#/personal/MyBid':
            oIs[4].style.background = "url('../../../static/img/PersonalCenter/img_bid_sel.png') no-repeat center center"
            _this.titTex = '参与的投标'
            break
          case '#/personal/MyAuction':
            oIs[5].style.background = "url('../../../static/img/PersonalCenter/img_auction_sel.png') no-repeat center center"
            _this.titTex = '参与的竞拍'
            break
          default:
            if (location.hash.indexOf('/carDetails') !== -1) {
              _this.isViewShow = false
              return ''
            }
            break
        }
      }, 0)
    }
  }
}
</script>
<style lang="scss" scoped>
.PersonalCenter{
  width: 100%;
  background: #fff;
  .PersonalCenter_content{
    width: 1200px;
    margin: 0 auto;
    .PersonalCenter_tit{
      width: 100%;
      margin: 30px 0;
      font-size: 14px;
      color: #666;
      &>a{
        color: #666;
        &:hover{
          color: #ff6f3c;
        };
      };
    }
    .PersonalCenter_bod{
      width: 100%;
      margin-bottom: 70px;
      overflow: hidden;
      .PersonalCenter_nav{
        width: 240px;
        background: #fafafa;
        float: left;
        margin-right: 20px;
        li{
          height: 70px;
          line-height: 70px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          margin-left: 3px;
          position: relative;
          i{
            display: inline-block;
            float: left;
            width: 24px;
            height: 24px;
            margin: 22px 20px 24px 50px;
          }
          span{
            display: block;
            float: left;
          }
          div{
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 100%;
          }
        }
        .active{
          background: #fff2ee;
          margin-left: 0;
          border-left: 3px solid #ff6f3c;
          color: #ff6f3c;
        }
        // &>li:hover{
        //   background: #fff2ee;
        //   margin-left: 0;
        //   border-left: 3px solid #ff6f3c;
        // }
        .PersonalInformation i{
          background: url('../../../static/img/PersonalCenter/img_xinxi_nor.png') no-repeat center center;
        }
        .deposit i{
          background: url('../../../static/img/PersonalCenter/img_baozhengjin_nor.png') no-repeat center center;
        }
        .MyCar i{
          background: url('../../../static/img/PersonalCenter/img_car_nor.png') no-repeat center center;
        }
        .MyAttention i{
          background: url('../../../static/img/PersonalCenter/img_guanzhu_nor.png') no-repeat center center;
        }
        .MyBid i{
          background: url('../../../static/img/PersonalCenter/img_bid_nor.png') no-repeat center center;
        }
        .MyAuction i{
          background: url('../../../static/img/PersonalCenter/img_auction_nor.png') no-repeat center center;
        }
      }
    }
  }
}
</style>
